<script>document.cookie="last=pages/reproduccionvideos.php";</script>
<script src="js/video-player.js"></script>

<p class="xl">Reproducción de videos</p>
<p>
    Una de las aplicaciones mas utilizadas de Internet así como de las computadoras es la reproducción de videos.<br>
    A través del siguiente tutorial, usted aprenderá a manejar un reproductor de videos genérico, posteriormente podrá aplicar dicho
    aprendizaje en cualquier reproductor.
</p>
<p class="large separado"><u>Elementos de un reproductor de videos</u></p>

<table width="100%" class="borde_1px">
    <tr>
        <td>
            <img src="img/reproductor/play_button.png" height="30" title="Imagen del botón Reproducir"><b> Reproducir</b>
        </td>
        <td>
            <p>El botón Reproducir (Play) inicia la reproducción del video. Una vez iniciada, este botón cambiará al estado Pausa.</p>
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/reproductor/pause_button.png" height="30" title="Imagen del botón Pausa"><b> Pausa</b>
        </td>
        <td>
            <p>El botón Pausa (Pause) interrumpe la reproducción. Una vez pausada, este botón cambiará al estado Reproducir.</p>
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/reproductor/time_bar.png" height="30" title="Imagen de la Barra de reproducción"><br><b class="mismaLinea"> Barra de reproducción</b>
        </td>
        <td>
            <p>La barra de reproducción le permite avanzar o retroceder la reproducción actual a un instante especifico, desplazando dicha barra horizontalmente o haciendo clic en un punto de la misma.</p>
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/reproductor/time_counter.png" height="30" title="Imagen del contador de tiempo"><b> Tiempo</b>
        </td>
        <td>
            <p>El contador de tiempo muestra el instante (minutos:segundos) en el que se está ubicado en la barra de reproducción si el video está reproduciendo o pausado, o la duración si el video está detenido.</p>
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/reproductor/max_volume_mode.png" height="30" title="Imagen del control de volumen"><br><b class="mismaLinea"> Control de volumen</b>
        </td>
        <td>
            <p>Indica si el sonido está activado o silenciado y su nivel. Con este control podrá regular el volumen del audio desplazándose horizontalmente en una escala del 0% <img src="img/reproductor/bar_volume_0_percent.png" height="30" title="Imagen de la barra de volumen al 0%"> al 100% <img src="img/reproductor/bar_volume_100_percent.png" height="30" title="Imagen de la barra de volumen al 100%"></p>
            <p>Al hacer clic izquierdo sobre <img src="img/reproductor/volume_button.png" height="30" title="Imagen de volumen activado"> el audio del video será silenciado y el control cambiará a <img src="img/reproductor/mute_mode.png" height="30" title="Imagen del control de volumen silenciado"></p>
            <p>Para activar el audio nuevamente debe hacer clic izquierdo sobre <img src="img/reproductor/mute_button.png" height="30" title="Imagen de volumen silenciado"></p>
        </td>
    </tr>
    <tr>
        <td>
            <img src="img/reproductor/full_screen_mode.png" height="30" title="Imagen del botón Pantalla completa"><b class="mismaLinea"> Pantalla completa</b>
        </td>
        <td>
            <p>El modo pantalla completa permite visualizar el video utilizando la totalidad de la pantalla. Para salir del modo pantalla completa, hay que volver a presionar el botón o presionar la tecla Escape que está en la esquina superior izquierda del teclado.</p>
        </td>
    </tr>
</table>

<p>
    <video id="reproductor" controls
        onplay="startVideo()"
        onpause="pauseVideo()"
        ontimeupdate="updateTime()"
        onvolumechange="changeVideoVolume()"
        >
        <source src="videos/reproductor/example.mp4" type="video/mp4">
    </video>
</p>

<ol>
    <li id="T1S1">Para iniciar el video haga clic en el botón <b>Reproducir</b>.<span id="T1S1-complete" class="felicitacion oculto"> ¡BIEN!</span></li>
    <li id="T1S2" class="oculto">Si desea pausar el video haga clic en el botón <b>Pausa</b>.<span id="T1S2-complete" class="felicitacion oculto"> ¡BIEN!</span></li>
    <li id="T1S3" class="oculto">Para avanzar a un punto determinado, haga clic en la <b>Barra de reproducción</b>.<span id="T1S3-complete" class="felicitacion oculto"> ¡BIEN!</span></li>
<?php if($_COOKIE['so']!='android') {?>
    <li id="T1S4" class="oculto">Para entrar al modo pantalla completa haga clic en el botón <b>Pantalla completa</b> (para salir vuelva a presionar el botón o presione la tecla Escape).<span id="T1S4-complete" class="felicitacion oculto"> ¡BIEN!</span></li>
    <li id="T1S5" class="oculto">Para controlar el volumen del sonido haga clic sobre la barra del <b>Control de volumen</b>.<span id="T1S5-complete" class="felicitacion oculto"> ¡BIEN!</span></li>
</ol>
<div id="T-complete" class="oculto">
    <p class="felicitacion"> ¡Felicitaciones, ha completado exitosamente el tutorial de reproducción de videos!</p>
    <p class="siguiente">Haga clic en el siguiente enlace para <a href="#" onclick="load('pages/navegadorweb.php');levelUp('5');">seguir aprendiendo</a>.</p>
</div>
<?php }?>
<?php if($_COOKIE['so']=='android') {?>
    <li id="T1S4" class="oculto">Para entrar al modo pantalla completa haga clic en el botón <b>Pantalla completa</b> (para salir vuelva a presionar el botón).<span id="T1S4-complete" class="felicitacion oculto"> ¡BIEN!</span></li>
</ol>
<div id="T1S5" class="oculto">
    <p class="felicitacion"> ¡Felicitaciones, ha completado exitosamente el tutorial de reproducción de videos!</p>
    <p class="siguiente">Haga clic en el siguiente enlace para <a href="#" onclick="load('pages/navegadorweb.php');levelUp('5');">seguir aprendiendo</a>.</p>
</div>
<?php }?>
